<template>
  <a-table
    :columns="columns"
    :data-source="tableList"
    :pagination="false"
    :scroll="{ y: '780px' }"
    
  >
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'address'">
        {{ record.region }}{{ record.address }}
      </template>
      <template v-if="column.dataIndex === 'img'">
        <a-image :preview="true" width="60px" height="60px" :src="record.img" alt="图片"></a-image>
      </template>
      <template v-if="column.dataIndex === 'createdAt'">
        {{ dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template v-if="column.dataIndex === 'status'">
        <span :class="[record.status > 0 ? 'active' : '']">{{ statusText[record.status] }}</span>
      </template>
      <template v-if="column.dataIndex === 'operation'">
        <a-button type="link" @click="handleAdd(record)">编辑</a-button>
        <a-popconfirm
          title="确定删除图?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirm(record)"
        >
          <a-button danger type="link">删除</a-button>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import type { TTable } from './type.dict'
const statusText = ['未开启', '已开启']
const emit = defineEmits(['delBanner', 'handleAdd'])

defineProps<{ tableList: TTable[] }>()

const confirm = (record: { _id: string }) => {
  emit('delBanner', record)
}
const handleAdd = (record: { _id: string }) => {
  emit('handleAdd', record)
}

const columns = [
  {
    title: '图片',
    dataIndex: 'img',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 90,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 90,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
  },
]
</script>
<style lang="stylus" scoped>
@import "@/assets/antgloab-ant.css";

.active {
  color: #1677ff;
}
.red{
  color red
}
.modal-center {
  display flex
  flex-direction column
  align-items center
  justify-content center
  margin 46px 0 40px

  .modal-text {
    margin 16px 0 56px
    font-size 16px
    font-weight 500
  }

  .modal-btn {
    width 200px
    height 46px
    border-radius: 4px
    background #3483FF
    font-weight 500
    font-size 16px
  }
}

:deep(.ant-table-body::-webkit-scrollbar) {
  width: 0;
}

.header_text {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
}
</style>
